<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影座位预定</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>欢迎来到天地在线影院</h1>
		<div class="movie-container">
			<label>选择影片: </label>
			<select id="movie">
				<option value="32">寄生虫（票价: 32元）</option>
				<option value="35">小丑（票价: 35元）</option>
				<option value="38">好莱坞往事（票价: 38元）</option>
				<option value="30">玩具总动员（票价: 30元）</option>
			</select>
		</div>
		<ul class="showcase">
			<li>
				<div class="seat"></div>
				<small>可选</small>
			</li>
			<li>
				<div class="seat selected"></div>
				<small>已选</small>
			</li>
			<li>
				<div class="seat occupied"></div>
				<small>不可选</small>
			</li>
		</ul>
		<div class="container">
			<div class="screen"></div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat occupied"></div>
				<div class="seat occupied"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat occupied"></div>
				<div class="seat occupied"></div>
			</div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat occupied"></div>
				<div class="seat occupied"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
			</div>
			<div class="row">
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat"></div>
				<div class="seat occupied"></div>
				<div class="seat occupied"></div>
				<div class="seat occupied"></div>
				<div class="seat"></div>
			</div>
		</div>
		<p class="text">
			您已经选择了: <span id="count">0</span>个座位，
			总计票价为: <span id="total">0</span>元
		</p>
		<script src="index.js"></script>
	</body>
</html>
